import React, { PureComponent } from "react";

import { connect } from "react-redux";
import { Redirect } from "react-router-dom";
import "./index.scss";
import { login } from "./store/actionCreators";

class Login extends PureComponent {
  render() {
    console.log(this.props.location);
    if(!this.props.login)
    {
    return (
      <div className="sign">
        <div className="logo-wrapper">
          <div className="logo">
            <a href="/">
              <img
                src="https://cdn2.jianshu.io/assets/web/logo-58fd04f6f0de908401aa561cda6a0688.png"
                alt="Logo"
              />
            </a>
          </div>
        </div>
        <div className="container">
          <div className="download-content">
            <a
              className="download-btn"
              href="https://www.jianshu.com/apps? utm_medium=desktop&amp;utm_source=sign_in_page_click"
            >
              下载简书APP
            </a>
            <div className="download-qrcode">
              <div className="download-qrcode-big">
                <div className="download-qrcode-icon"></div>
              </div>
            </div>
          </div>

          <div className="main">
            <h2 className="title">
              <a className="active" href="/sign_in">
                登录
              </a>
              <b>·</b>
              <a id="js-sign-up-btn" className="" href="/sign_up">
                注册
              </a>
            </h2>
            <div className="form">
              <div
                className="input-prepend"
                style={{ borderBottom: "1px solid #c8c8c8" }}
              >
                {" "}
                <i className="iconfont icon-yonghu"></i>
                <input
                  placeholder="手机号或邮箱"
                  type="text"
                  name="phone"
                  ref={(c) => (this.phone = c)}
                />
              </div>
              <div className="input-prepend">
                {" "}
                <i className="iconfont icon-mima"></i>
                <input
                  placeholder="密码"
                  type="text"
                  name="password"
                  ref={(c) => (this.password = c)}
                />
              </div>
            </div>
            <div className="btn">
              <div className="remember-btn">
                <input type="checkbox" value="true" />
                <span>记住我</span>
              </div>
              <div className="forget-btn">
                <a className="" href="/">
                  登录遇到问题?
                </a>
              </div>
            </div>

            <button
              className="sign-in-button"
              type="button"
              onClick={() => {
                this.props.Login(this.phone, this.password);
              }}
            >
              登录
            </button>

            <div className="more-sign">
              <h6>社交帐号登录</h6>
              <div className="icon">
                <a className="weibo" href="/users/auth/wechat">
                  <i className="iconfont icon-weibo"></i>
                </a>

                <a className="weixin" target="_blank" href="/users/auth/wechat">
                  <i className="iconfont icon-weixin"></i>
                </a>
                <a
                  id="qq"
                  className="qq"
                  target="_blank"
                  href="/users/auth/qq_connect"
                >
                  <i className="iconfont icon-tengxunqq"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

    
  
    )}
    else{
      return <Redirect to='/'/>   }
  }
}

const mapState = (state) => ({
  login: state.getIn(["login","loginstatus"]),
});

const mapDispatch = (dispatch) => ({
  Login(phone, password) {
 
    if (phone.value.trim()&&password.value.trim()) {
      console.log(phone.value);
       dispatch(login(phone.value,password.value))
    } else {
      alert("请不要输入空");
    }
  },
});

export default connect(mapState, mapDispatch)(Login);
